<template>
  <div class="container">
    <div class="app-container">
      <el-card class="social-btn">
        <el-button size="mini" type="danger">历史归档</el-button>
        <el-button size="mini" type="primary">202301报表</el-button>
      </el-card>
      <el-card style="margin:10px 0;">
        <el-form class="form">
          <el-form-item label-width="120px" label="部门">
            <el-checkbox-group v-model="querySocial.departmentChecks" @change="getSocialList">
              <el-checkbox v-for="item in deptList" :key="item.id" :label="item.id">{{ item.name }} </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label-width="120px" label="社保城市">
            <el-checkbox-group v-model="querySocial.socialSecurityChecks" @change="getSocialList">
              <el-checkbox v-for="item in cityList" :key="item.id" :label="item.id">{{ item.name }} </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label-width="120px" label="公积金城市">
            <el-checkbox-group v-model="querySocial.providentFundChecks" @change="getSocialList">
              <el-checkbox v-for="item in cityList" :key="item.id" :label="item.id">{{ item.name }} </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card>
        <el-table
          :data="socialList"
          :header-cell-style="{fontSize: '14px', backgroundColor: '#F5F6F8',color:'#909399'}"
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="序号"
            width="50"
          />
          <el-table-column
            prop="username"
            label="姓名"
            sortable
            width="150"
          />
          <el-table-column
            prop="mobile"
            label="手机"
            width="150"
            sortable
          />
          <el-table-column
            prop="workNumber"
            label="工号"
            width="150"
            sortable
          />
          <el-table-column
            prop="departmentName"
            label="部门"
            width="180"
            sortable
          />

          <el-table-column
            prop="timeOfEntry"
            label="入职时间"
            width="150"
            sortable
          />
          <el-table-column
            prop="leaveTime"
            label="离职时间"
            width="150"
            sortable
          >
            <template v-slot="{row}">
              <span>{{ row.leaveTime?row.leaveTime:'--' }} </span>
            </template>
          </el-table-column>
          <el-table-column prop="participatingInTheCity" label="社保城市" width="180" />
          <el-table-column prop="providentFundCity" label="公积金城市" width="180" />
          <el-table-column prop="socialSecurityBase" label="社保基数" width="100" />
          <el-table-column prop="providentFundBase" label="公积金基数" width="100" />
        </el-table>
        <el-row type="flex" justify="center" align="middle" style="height: 60px;">
          <el-col :span="4">
            <el-pagination
              layout="prev, pager, next"
              :total="total"
              :current-page="querySocial.page"
              :page-size="querySocial.pagesize"
              @current-change="changPage"
            />
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getDepartmentList } from '@/api/department'
import { getCity, getSocialList } from '@/api/social'
export default {
  name: 'Social',
  data() {
    return {
      deptList: [],
      cityList: [],
      socialList: [],
      total: 0,
      querySocial: {
        page: 1,
        pagesize: 10,
        departmentChecks: [],
        providentFundChecks: [],
        socialSecurityChecks: []
      }
    }
  },
  created() {
    this.getDepartmentList()
    this.getCity()
    this.getSocialList()
  },
  methods: {
    async getDepartmentList() {
      this.deptList = await getDepartmentList()
    },
    async getCity() {
      this.cityList = await getCity()
    },
    async getSocialList() {
      const { rows, total } = await getSocialList(this.querySocial)
      this.socialList = rows
      this.total = total
    },
    changPage(page) {
      console.log(page)

      this.querySocial.page = page
      this.getSocialList()
    }
  }
}
</script>

<style lang="scss" scoped>
.social-btn {
  display: flex;
}
</style>
